<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Component fallback example</title>
    <script src="../../../node_modules/vue/dist/vue.global.js"></script>
    <script src="../../../packages/petite-vue-i18n/dist/petite-vue-i18n.global.js"></script>
    <style>
      #app {
        border: red solid;
      }
      #component {
        border: blue solid;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h1>Root</h1>
      <p class="root">{{ t("message.hello") }}</p>
      <Component1 />
    </div>
    <script>
      const { createApp } = Vue
      const { createI18n, useI18n } = PetiteVueI18n

      const i18n = createI18n({
        locale: 'ja',
        messages: {
          en: {
            'message.hello': 'hello world',
            'message.greeting': 'good morning, world!'
          },
          ja: {
            'message.hello': 'こんにちは、世界',
            'message.greeting': 'おはよう、世界！'
          }
        }
      })

      const Component1 = {
        template: `
          <div id="component">
            <h1>Component1</h1>
            <p class="c1">Component1 locale messages: {{ t("message.hello") }}</p>
            <p class="c2">Fallback global locale messages: {{ t("message.greeting") }}</p>
          </div>
        `,
        setup() {
          const { t } = useI18n({
            messages: {
              en: { 'message.hello': 'hello component1' },
              ja: { 'message.hello': 'こんにちは、component1' }
            }
          })

          // Something to do ...
          //

          return { t }
        }
      }

      const app = createApp({
        components: { Component1 },
        setup() {
          const { t } = useI18n()

          // Something to do ...
          //

          return { t }
        }
      })
      app.use(i18n)
      app.mount('#app')
    </script>
  </body>
</html>
